* {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft Yahei';
}

.lanren {
	width: 100%;
	overflow: hidden;
}

.flip-3d {
	margin-left: 150px;
	perspective: 1200px;
	width: 150px;
	height: 150px;
	float: left;
}

.flip-3d figure {
	position: relative;
	transform-style: preserve-3d;
	transition: 1s transform;
	font-size: 18px;
}

.flip-3d figure img {
	width: 100%;
	height: auto;
}

.flip-3d figure img:hover {
	cursor: pointer;
}

.flip-3d figure figcaption {
	position: absolute;
	width: 100%;
	height: 154px;
	top: 0;
	transform: rotateY(.5turn) translateZ(1px);
	background: rgba(242, 242, 242, 0.9);
	text-align: center;
	padding-top: 45%;
	opacity: 0.6;
	transition: 1s .5s opacity;
}

.flip-3d:hover figure {
	transform: rotateY(.5turn);
}
.flip-3d:hover figure figcaption {
	opacity: 1;
}
.flip-3d figure:after {
	content: " ";
	display: block;
	width: 100%;
	transform: rotateX(90deg);

}

@media screen and (max-width: 800px) {
	#flip-3d {
		perspective-origin: center top;
	}
	div#flip-3d figure {
		float: none;
		width: 50%;
		margin: 0 auto;
		margin-bottom: 12vw;
	}
	.flip-3d figure figcaption {
		font-size: 0.8rem;
	}
	div#flip-3d figure:last-child {
		display: none;
	}